import React from 'react';
import {
    FlatList,
    View,
    Text,
    Image,
    TouchableOpacity,
    ImageBackground,
} from 'react-native';
import {connect} from 'react-redux';
import actions from '../../action';
import FontAwesome from "react-native-vector-icons/FontAwesome";
import styles from './style/app';
import NavigationUtil from "../../navigator/NavigationUtil";
import LinesItem from './LinesItem';
import DiaLog from '../../components/DiaLog';
import {Toast} from '../../components/Toast';
import BackPressComponent from '../../components/BackPressComponent';
import {LinesList} from '../../public/dao/LinesDatas';
class Lines extends React.Component {
    constructor(props){
        super(props);
        this.backPress = new BackPressComponent({backPress: () => this.onBackPress()});
        this.storeName = 'HomeloanDatas'+'largeloan';
        this.state={
            typeName:'请选择您的额度',
            LinesList:LinesList,
            show:true,
        }
    }
    componentDidMount(){
        this.backPress.componentDidMount();//监听返回键
    }
    componentWillUnmount(){
        this.backPress.componentWillUnmount();//移除监听返回键
    }
    onBackPress() {
        NavigationUtil.goBack(this.props.navigation);
        return true;
    }
    /**
     * 获取与当前页面有关的数据
     * @returns {*}
     * @private
     */
    _store() {
        const {loanDataList} = this.props;
        let store = loanDataList[this.storeName];
        if (!store) {
            store = {
                isLoading: false,
                projectModels: [],//要显示的数据
            }
        }
        return store;
    }
    _touchCaoback = (value,name)=>{
        this.dialog.setModalVisible(false);
        this.setState({
            typeName:name,
            show:false,
        })
        this.props.getLoanData(this.storeName,{
            loantype:value,
            ref_customer_id:2
        })
    }
    _renderHeader = ()=>{
        return <View>
            <View style={styles.typeCard}>
                <TouchableOpacity onPress={()=>{this.dialog.setModalVisible(true)}}>
                    <View style={styles.typeCards}>
                        <Text style={styles.title}>{this.state.typeName}</Text>
                        <FontAwesome style={styles.FontAwesome} name={'caret-down'} size={26}/>
                    </View>
                </TouchableOpacity>
            </View>
            <View><Text style={styles.textTitle}>已为您匹配到最适合您的产品</Text></View>
        </View>
    }
    render() {
        let store = this._store();
        let {show,typeName} = this.state;
        let dataList = store.projectModels;
        console.log('520sss',store.projectModels)
        let arrBox = [];
        if(typeName=='1000~20000'){
            if(Array.isArray(store.projectModels)){
                arrBox.push(store.projectModels[2])
            } 
        }else if(typeName=='20000~80000'){
            if(Array.isArray(dataList)){
                arrBox.push(store.projectModels[3])
                
            }
        }else if(typeName=='80000以上'){
            if(Array.isArray(dataList)){
                arrBox.push(store.projectModels[3])
            }
        }   
        
        return (
            <ImageBackground style={styles.container} source={require('../../images/lending.png')}>
                {show?<View>
            <View style={styles.typeCard}>
                <TouchableOpacity onPress={()=>{this.dialog.setModalVisible(true)}}>
                    <View style={styles.typeCards}>
                        <Text style={styles.title}>{this.state.typeName}</Text>
                        <FontAwesome style={styles.FontAwesome} name={'caret-down'} size={26}/>
                    </View>
                </TouchableOpacity>
            </View>
           <View><Text style={styles.textTitles}>选择额度为您匹配更加适合您的产品</Text></View>
        </View>:
                <FlatList
                data={arrBox}
                renderItem={(info,i)=>(<LinesItem infoDatas={info} key={i}/>)}
                keyExtractor={(item, index) => {
                    return index.toString()
                }}
                ListHeaderComponent={this._renderHeader}
                />
                }
                <DiaLog
                    ref={dialog => this.dialog = dialog}
                    Datas={this.state.LinesList}
                    touchCaoback={this._touchCaoback}/> 
            </ImageBackground>
        )
    }
}
const mapStateToProps = state =>({
    nav:state.nav,
    loanDataList:state.loanDataList
});
const mapDispatchToProps = dispatch => ({
    getLoanData:(storeName,data)=>dispatch(actions.getLoanData(storeName,data))
})
export default connect(mapStateToProps,mapDispatchToProps)(Lines);
